div,
p {
  box-sizing: border-box;
}
.boat_wrap {
  width: 375px;
  min-height: 1812px;
  margin-top: -45px;
  background: #59a96c url('../../../images/duanwu/duanwu_bg.png') no-repeat;
  background-size: contain;
  overflow: hidden;
  font-family: 'HarmonyOS Sans';
  position: relative;
  .time_wrap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 147px;
    width: 304px;
    height: 24px;
    background: url('../../../images/duanwu/time_bg.png') no-repeat;
    background-size: contain;
    text-align: center;
    line-height: 24px;
    font-size: 12px;
    color: #fff;
    font-weight: 500;
  }
  .rule_btn {
    position: absolute;
    width: 92px;
    height: 32px;
    line-height: 32px;
    padding-left: 12px;
    right: -16px;
    top: 175px;
    background: linear-gradient(260.88deg, #7aca58 9.34%, #4e902f 89.84%);
    border: 1px solid #d9ffe1;
    box-shadow:
      inset 0px -7px 11px rgba(255, 255, 255, 0.4),
      inset 0px 8px 9px rgba(255, 255, 255, 0.6);
    border-radius: 32px;
    font-size: 14px;
    color: #fff;
  }
  .box {
    width: 348px;
    background: linear-gradient(180deg, #cff9cd 0%, #f7fff7 100%);
    border: 11px solid #4e902f;
    border-radius: 20px;
    margin: 0 auto;
  }
  .reward_box {
    padding: 30px 12px 18px 12px;
    height: 238px;
    margin: 642px auto 0;
    position: relative;

    z-index: 2;
    .title {
      position: absolute;
      top: -55px;
      left: 0;
      z-index: 1;
      width: 346px;
      height: 77px;
      background: url('../../../images/duanwu/title_bg1.png') no-repeat;
      background-size: contain;
    }
    .reward_level {
      display: flex;
      justify-content: space-between;
      .item {
        width: 70px;
        position: relative;
        .tag {
          font-size: 11px;
          color: #204d2c;
          line-height: 23px;
          text-align: center;
          width: 65px;
          height: 28px;
          background: url('../../../images/duanwu/reward_tag_bg.png') no-repeat;
          background-size: contain;
          // background: linear-gradient(260.88deg, #4DFF74 9.34%, #FFE600 89.84%);
          border-radius: 16px;
        }
        .icon {
          margin-top: 6px;
          width: 100%;
          height: 70px;
          background: url('../../../images/duanwu/small_zong.png') no-repeat;
          background-size: contain;
        }
        &.disable {
          opacity: 0.2;
        }
      }
    }
    .prograss {
      min-height: 32px;
      margin: 8px 0 16px 0;
      position: relative;
      .bar {
        z-index: 1;
        width: 302px;
        height: 10px;
        background: rgba(#59b873, 0.2);
        border-radius: 10px;
      }
      .score {
        z-index: 3;
        position: absolute;
        top: 0;
        left: 0;
        height: 10px;
        background: linear-gradient(260.88deg, #4dff74 9.34%, #ffe600 89.84%);
        border-radius: 10px;
      }
      .point {
        text-align: center;
        position: absolute;
        top: -1px;
        left: 10px;
        z-index: 5;
        width: 52px;
        font-size: 12px;
        .circle {
          margin: 0 auto;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background: #4dff74;
          border: 2px solid #ffffff;
          margin-bottom: 7px;
        }
        &:nth-of-type(2) {
          left: 85px;
        }
        &:nth-of-type(3) {
          left: 165px;
        }
        &:nth-of-type(4) {
          left: 240px;
        }
      }
    }
    .my_score {
      font-weight: 400;
      color: #204d2c;
      font-size: 14px;
      text-align: center;
    }
  }
  .gift_box {
    position: relative;
    height: 126px;
    margin-top: 67px;
    .title {
      position: absolute;
      top: -55px;
      left: 0;
      z-index: 1;
      width: 346px;
      height: 77px;
      background: url('../../../images/duanwu/title_bg2.png') no-repeat;
      background-size: contain;
    }
    .con {
      padding-top: 4px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      // padding: 0 18px;
      .item {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        color: #204d2c;
        font-size: 12px;
        .icon {
          margin: 0 auto 6px;
          width: 73px;
          height: 63px;
          &.a {
            background: url('../../../images/duanwu/gift_item1.png') no-repeat;
            background-size: contain;
          }
          &.b {
            background: url('../../../images/duanwu/gift_item2.png') no-repeat;
            background-size: contain;
          }
          &.c {
            background: url('../../../images/duanwu/gift_item3.png') no-repeat;
            background-size: contain;
          }
        }
      }
    }
  }

  .boat_task {
    position: relative;
    width: 343px;
    margin: 70px auto 0;
    .title {
      position: absolute;
      top: -49px;
      left: 0;
      z-index: 1;
      width: 346px;
      height: 77px;
      background: url('../../../images/duanwu/title_bg3.png') no-repeat;
      background-size: contain;
    }
    .task_item {
      padding: 12px 10px;
      margin-bottom: 12px;
      width: 343px;
      height: 74px;
      background: linear-gradient(180deg, #cff9cd 0%, #f7fff7 100%);
      box-shadow: 0px 6px 0px #8fc88d;
      border-radius: 20px;
      display: flex;
      align-items: center;
      .icon {
        width: 50px;
        height: 50px;
        margin-right: 4px;
      }
      // 循环
      .xkd(@n, @i: 1) when (@i =< @n) {
        .icon_@{i} {
          background: url('../../../images/duanwu/task_@{i}.png') no-repeat;
          background-size: contain;
        }
        .xkd(@n, (@i + 1));
      }
      .xkd(7);

      .info {
        flex: 1;
        .tit {
          font-size: 16px;
          color: #204d2c;
          span {
            color: #ffb443;
          }
        }
        .send {
          padding-top: 8px;
          color: #204d2c;
          opacity: 0.4;
          font-size: 12px;
        }
      }
      .action_btn {
        width: 72px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        border-radius: 16px;
        color: #3e2d2b;
        background: linear-gradient(260.88deg, #4dff5e 9.34%, #ffe600 89.84%);
        border: 1px solid #d9ffe1;
        box-shadow:
          inset 0px -7px 11px rgba(255, 255, 255, 0.4),
          inset 0px 8px 9px rgba(255, 255, 255, 0.6);
        &.done {
          box-shadow: none;
          background: #cbffd9;
          order: 1px solid #d9ffe1;
          color: rgba(#377266, 0.2);
        }
      }
    }
  }

  .rule_box {
    width: 354px;
    height: 462px;
    margin: 24px auto;
    background: url('../../../images/duanwu/rule_bg.png') no-repeat;
    background-size: contain;
    padding: 70px 22px 30px;
    .tit {
      width: 91px;
      height: 34px;
      line-height: 34px;
      background: linear-gradient(260.88deg, #4dff5e 9.34%, #ffe600 89.84%);
      border: 1px solid #d9ffe1;
      box-shadow:
        inset 0px -7px 11px rgba(255, 255, 255, 0.4),
        inset 0px 8px 9px rgba(255, 255, 255, 0.6);
      border-radius: 16px;
      color: #4e8e2f;
      text-align: center;
      font-weight: 700;
      font-size: 16px;
      margin-bottom: 12px;
    }
    .c {
      color: #4e8e2f;
      font-size: 14px;
      line-height: 20px;
      padding-left: 10px;
      letter-spacing: 1.5px;
    }
  }

  .reward_detail_box {
    overflow: hidden;
    width: 354px;
    height: 230px;
    margin: 24px auto;
    background: url('../../../images/duanwu/reward_bg.png') no-repeat;
    background-size: contain;
    padding: 70px 18px 0;
    .tit {
      // margin-top: 70px;
      width: 158px;
      height: 34px;
      line-height: 34px;
      background: linear-gradient(260.88deg, #4dff5e 9.34%, #ffe600 89.84%);
      border: 1px solid #d9ffe1;
      box-shadow:
        inset 0px -7px 11px rgba(255, 255, 255, 0.4),
        inset 0px 8px 9px rgba(255, 255, 255, 0.6);
      border-radius: 16px;
      color: #4e8e2f;
      text-align: center;
      font-weight: 700;
      font-size: 16px;
      margin-bottom: 12px;
    }
    .info {
      padding: 8px 45px 0 18px;
      font-size: 14px;
      color: #4e8e2f;
      p {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 12px;
      }
    }
  }
}

.re_open_modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .tit {
    width: 205px;
    height: 38px;
    background: url('../../../images/duanwu/re_open-tit.png') no-repeat;
    background-size: contain;
  }
  .reward_bg {
    margin-top: 46px;
    width: 205px;
    height: 205px;
    background: url('../../../images/duanwu/big_zong.png') no-repeat;
    background-size: contain;
    // &:active {
    //     transform: scale(.96);
    // }
  }

  &.reward {
    top: 46%;
  }
  .content {
    width: 292px;
    height: 404px;
    background: url('../../../images/duanwu/reward_modal_bg.png') no-repeat;
    background-size: contain;
    display: flex;
    // align-items: end;
    justify-content: center;
    position: relative;
    .item {
      position: absolute;
      bottom: 48px;
      width: 104px;
      height: 125px;
      background: #51aa8b;
      border-radius: 16px;
      // margin-bottom: 48px;
      text-align: center;
      img {
        border: none;
        width: 100px;
        height: 100px;
        margin: 0 auto;
        font-size: 0;
      }
      .name {
        padding-top: 4px;
        font-size: 12px;
        color: #fff;
        transform: scale(0.95);
      }
    }
  }
}
